<template>
  <div class="header">
    <div class="header-div">
      <text class="header-div-text">影票识别详情</text>
    </div>

    <div class="header-body">
      <div class="header-body-header">
        <div class="body-header-img">
          <image
            style="width: 100%; height: 100%"
            :src="dataShu?.identifyTaskVo.filmImg"
          ></image>
        </div>

        <div class="body-header-right">
          <text class="body-header-name"
            >{{ dataShu?.identifyTaskVo.filmName }} ×
            {{ dataShu?.identifyTaskVo.discern.seats.length }}</text
          >

          <text class="body-header-time">{{
            dataShu?.identifyTaskVo.discern.showTime
          }}</text>

          <text class="body-header-Mia">{{
            dataShu?.identifyTaskVo.discern.cinemaName
          }}</text>

          <text class="body-header-Mia">{{
            dataShu?.identifyTaskVo.discern.cinemaAddress
          }}</text>

          <text class="body-header-Mia">{{
            dataShu?.identifyTaskVo.discern.hallName
          }}</text>
        </div>
      </div>
      <div class="orc-Zuo">
        <scroll-view class="select-box-scroll" :scroll-x="true">
          <div class="orc-Zuo-Div">
            <div
              v-for="(item, index) in dataShu?.identifyTaskVo.discern.seats"
              :key="index"
              class="orc-Zuo-Div-item"
            >
              <div>
                <image
                  style="width: 16px; height: 15px"
                  src="../../../assets/images/zuowei.png"
                ></image>
              </div>

              <div class="orc-Zuo-Div-item-right">
                <text>{{ item.seatNo }}</text>
              </div>
            </div>
          </div>
        </scroll-view>
      </div>
      <div class="zhi-Ocr-div">
        <text class="zhi-Ocr">请检查影票是否正确，请核对后下单！</text>
      </div>
      <div class="ocr-Div">
        <div>
          <nut-button
            color="linear-gradient(to right, #ff69b4,#dc143c)"
            class="BUtton"
            @click="onConfirmPriceRule(1)"
            >渠道比价提交</nut-button
          >
        </div>

        <div>
          <nut-button
            color="linear-gradient(to right, #5232B7,#7237BC)"
            class="BUtton"
            @click="onConfirmPriceRule(0)"
            >选择渠道提交</nut-button
          >
        </div>
      </div>
    </div>
  </div>
</template>
<script setup lang="ts">
import { ref, defineEmits, toRefs } from "vue";
import Taro from "@tarojs/taro";

const dataCan = ref({}) as any;
const rateList: any = ref([]);

const props = defineProps({
  dataShu: Object,
});

const { dataShu } = toRefs(props);

const emit = defineEmits(["onClose"]);

const onConfirmPriceRule = (index: number) => {
  const a = dataShu?.value?.identifyTaskVo.discern.seats;
  a.forEach((element) => {
    element.areaId = element.regionName;
  });

  const resultInfo = {
    arealist: dataCan.value?.regions,
    selectedSeat: a,
    rateList: rateList.value,
    currentShowId: dataShu?.value?.identifyTaskVo.discern.showId,
    seatList: [],
    currentShowInfo: dataCan.value?.cinemaShow,
  };

  Taro.navigateTo({
    url: `/pages/order-channel/index?resultInfo=${encodeURIComponent(
      JSON.stringify(resultInfo)
    )}&isShowPrice=${index}`,
  });

  emit("onClose");
};

//计算限价比例
const calRate = () => {
  if (!dataCan.value?.cinemaLineVo.limitLow) {
    rateList.value = [
      {
        id: 1,
        name: "78折",
        zhe: 0.78,
      },
      {
        id: 2,
        name: "8折",
        zhe: 0.8,
      },
      {
        id: 3,
        name: "85折",
        zhe: 0.85,
      },
      {
        id: 4,
        name: "9折",
        zhe: 0.9,
      },
    ];
    return;
  }
  // 使用函数生成介于 78% 到 100% 之间的四个均等比例
  const minPercent = dataCan.value?.cinemaLineVo.limitLow / 100; // 最低的比例 78%
  const maxPercent = 1.0; // 最高的比例 100%
  const numberOfPercentages = 5; // 要生成的比例数量

  const generatedPercentages = generateEqualPercentages(
    minPercent,
    maxPercent,
    numberOfPercentages
  );
  rateList.value = generatedPercentages;
};

// 生成比例
const generateEqualPercentages = (minPercentage, maxPercentage, count) => {
  const step = (maxPercentage - minPercentage) / (count - 1);
  const percentages = [] as any;

  for (let i = 0; i < count - 1; i++) {
    const currentPercentage = minPercentage + step * i;
    percentages.push({
      id: i + 1,
      name: `${Math.round(currentPercentage * 100)}折`,
      zhe: currentPercentage.toFixed(2),
    });
  }
  return percentages;
};

const childMethod = (data: string) => {
  console.log("childMethod", data);
  dataCan.value = data;

  calRate();
};

defineExpose({ childMethod });
</script>
<style lang="scss" scoped>
.header {
  width: 100%;
  display: flex;
  flex-direction: column;
  .header-div {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 130px;
    border-bottom: 2px solid #f1f1f1;
    .header-div-text {
      font-size: 30px;
      font-weight: bold;
    }
  }

  .header-body {
    width: 100%;
    // margin: 40px;
    display: flex;
    flex-direction: column;
    align-items: center;
    .header-body-header {
      display: flex;
      flex-direction: row;
      width: 90%;
      margin: 40px 0;

      .body-header-img {
        width: 30%;
        height: 100%;
      }

      .body-header-right {
        width: 65%;
        height: 100%;
        margin-left: 30px;
        display: flex;
        flex-direction: column;

        .body-header-name {
          font-size: 30px;
          font-weight: bold;
          padding: 5px 0;
        }

        .body-header-time {
          font-size: 26px;
          color: #c56565;
          padding: 5px 0;
          font-weight: bold;
        }

        .body-header-Mia {
          display: flex;
          padding: 5px 0;
          flex-wrap: wrap;
          font-size: 26px;
          color: #7b7a7a;
          font-weight: bold;
        }
      }
    }

    .orc-Zuo {
      display: flex;
      justify-content: center;
      align-items: center;
      height: 85px;
      margin-top: 10px;
      width: 90%;
      background-color: #f8f8f8;
      margin-bottom: 10px;
      .select-box-scroll {
        width: 90%;
        height: 100%;
        display: flex;
        white-space: nowrap;
        align-items: center;

        .orc-Zuo-Div {
          display: flex;
          align-items: center;
          width: 100%;
          height: 100%;

          .orc-Zuo-Div-item {
            display: flex;
            flex-direction: row;
            align-items: center;
            margin-right: 30px;

            .orc-Zuo-Div-item-right {
              font-size: 26px;
              margin-left: 10px;
              font-weight: bold;
            }
          }
        }
      }
    }

    .ocr-Div {
      width: 90%;
      display: flex;
      flex-direction: row;
      align-items: center;
      justify-content: space-between;
      margin: 40px 0 60px 0;
      .BUtton {
        width: 260px;
        height: 70px;
        font-size: 20px;
      }
    }
  }
}

.zhi-Ocr-div {
  width: 90%;
  .zhi-Ocr {
    font-size: 24px;
    color: #7b7a7a;
    font-weight: bold;
  }
}
</style>
